<template>
	<div>
		<mt-swipe :auto="10000">
		  <mt-swipe-item v-for="item in lunbotuList" :key="item.url" >
		  	<img :src="item.img">
		  </mt-swipe-item>
		  
		</mt-swipe>

	</div>
</template>


<script type="text/javascript">
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return{
				lunbotuList:[]//保存轮播图的数组
			}
		},
		created(){
			this.getLunbotu();
		},
		methods:{
			getLunbotu(){
				this.$http.get('http://vue.studyit.io/api/getlunbo').then(result=>{
					//console.log(result.body)
					if(result.body.status===0){
						this.lunbotuList=result.body.message;
					}else{
						Toast('加载轮播图失败');
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.mint-swipe{
		height: 200px;
		.mint-swipe-item{
			&:nth-child(1){
				background-color: red;
			}
			&:nth-child(2){
				background-color: blue;
			}
			&:nth-child(3){
				background-color: cyan;
			}
		}
		img{
			height:100%;
			width: 100%;
		}
	}
</style>